<template>
  <div class="task-creation">
    <div class="task-search">
      <div class="search-title">
        任务创建
      </div>
      <!-- 基本信息 -->
      <div class="basic-info-container">
        <div class="info-title">
          基本信息
        </div>
        <div class="info-list">
          <ui-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <ui-form-item>
              <ui-row type="flex" class="row-bg" justify="space-around">
                <ui-col :span="8">
                  <ui-form-item label="任务名称" prop="taskname">
                    <ui-input v-model="ruleForm.name"></ui-input>
                  </ui-form-item>
                </ui-col>
                <ui-col :span="8">
                  <ui-form-item label="任务类型" prop="tasktype">
                    <ui-select v-model="ruleForm.type" placeholder="请选择活动区域">
                      <ui-option label="区域一" value="shanghai"></ui-option>
                      <ui-option label="区域二" value="beijing"></ui-option>
                    </ui-select>
                  </ui-form-item>
                </ui-col>
              </ui-row>
            </ui-form-item>
            <ui-form-item>
              <ui-row type="flex" class="row-bg" justify="space-around">
                <ui-col :span="8">
                  <ui-form-item label="开始日期" prop="startDate">
                    <ui-date-picker v-model="startTime" type="date" placeholder="选择日期" prefix-icon="ui-icon-date" :clearable="false">
                    </ui-date-picker>
                  </ui-form-item>
                </ui-col>
                <ui-col :span="8">
                  <ui-form-item label="结束时间" prop="endDate">
                    <ui-date-picker v-model="endTime" type="date" placeholder="选择日期" :clearable="false"> </ui-date-picker>
                  </ui-form-item>
                </ui-col>
              </ui-row>
            </ui-form-item>
            <ui-form-item>
              <ui-row type="flex" class="row-bg" justify="space-around">
                <ui-col :span="8">
                  <ui-form-item label="任务描述" prop="taskDescription">
                    <ui-input type="textarea" placeholder="请输入内容" v-model="taskDeac" maxlength="30" show-word-limit> </ui-input>
                  </ui-form-item>
                </ui-col>
                <ui-col :span="8">
                  <ui-form-item label="创建方式">
                    <span>自建式</span>
                  </ui-form-item>
                </ui-col>
              </ui-row>
            </ui-form-item>
          </ui-form>
        </div>
      </div>
      <!-- 客户范围 -->
      <div class="customer-scope-container">
        <div class="customer-title">
          客户范围
        </div>
        <div class="customer-list">
          <ui-form :model="customerForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <ui-form-item>
              <ui-row type="flex" class="row-bg" justify="center">
                <ui-col :span="8">
                  <ui-form-item label="客户范围" prop="tasktype">
                    <ui-select v-model="customerForm.type" placeholder="请选择活动区域" @change="onSelectCustomer">
                      <ui-option label="客群" value="1"></ui-option>
                      <ui-option label="白名单" value="2"></ui-option>
                      <ui-option label="管户客户" value="3"></ui-option>
                      <ui-option label="任意客户" value="4"></ui-option>
                    </ui-select>
                  </ui-form-item>
                </ui-col>
              </ui-row>
            </ui-form-item>
          </ui-form>
          <div class="customer-tabble"  v-show="currentType==='1'||currentType==='2'">
            <vx-table 
            :isRadio="true"
            :columns="columns" 
            :tableData="tableData"
            :customerStyle="true" 
            @getSelectData="getSelectData">
             <template slot="operation" slot-scope="scope">
              <ui-link type="primary" :underline="false" @click="onOperation(scope)">操作</ui-link>
             </template>
            
          </vx-table>
          </div>
          
          <div class="customer-tabble"  v-show="currentType==='3'||currentType==='4'">
            <vx-table
            :isSelect="true"
            :columns="columns" 
            :tableData="tableData" ></vx-table>
          </div>
          
        </div>
      </div>
      <!-- 其他信息 -->
      <div class="other-info-container">
        <div class="other-info-title">
          其他信息
        </div>
        <div class="other-info-list">
          <ui-form :model="otherInfoForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <ui-row type="flex" class="row-bg" justify="space-between">
              <ui-col :span="8">
                <ui-form-item label="费用额度(元)" prop="tasktype">
                  <ui-input v-model="otherInfoForm.input" placeholder="请输入"></ui-input>
                </ui-form-item>
              </ui-col>
              <ui-col :span="12">
                <ui-form-item label="触达方式" prop="tasktype">
                   <ui-checkbox-group 
                    @change="onChangeLinks"
                    v-model="otherInfoForm.checkedLink">
                    <ui-checkbox v-for="item in links" :label="item.id" :key="item.id">{{item.type}}</ui-checkbox>
                  </ui-checkbox-group>
                </ui-form-item>
              </ui-col>
            </ui-row>
            <ui-row type="flex" class="row-bg" justify="space-between">
              <ui-col :span="8">
                <ui-form-item label="营销指引" prop="tasktype">
                  <ui-select v-model="otherInfoForm.value" clearable placeholder="请选择">
                    <ui-option label="黄金糕" value="选项1"></ui-option>
                    <ui-option label="双皮奶" value="选项2"></ui-option>
                  </ui-select>
                </ui-form-item>
              </ui-col>
            </ui-row>
          </ui-form>
          <div class="other-info-table">
            <div class="other-info-table-header">
              <span>任务提醒人</span>
              <ui-button type="primary" icon="ui-icon-plus"  size="mini">新增任务提醒人</ui-button>
            </div>
            <div class="other-info-table">
              <ui-table
                data="tableData"
                style="width: 100%">
                <ui-table-column
                  label="岗位提醒人"
                  width="180">
                  <template slot-scope="scope">
                    <ui-select v-model="tableForm.value" clearable placeholder="请选择">
                      <ui-option label="黄金糕" value="选项1"></ui-option>
                      <ui-option label="双皮奶" value="选项2"></ui-option>
                    </ui-select>
                  </template>
                </ui-table-column>
                <ui-table-column
                  label="所在机构"
                  width="180">
                  <template slot-scope="scope">
                    <ui-select v-model="tableForm.institute" clearable placeholder="请选择">
                      <ui-option label="黄金糕" value="选项1"></ui-option>
                      <ui-option label="双皮奶" value="选项2"></ui-option>
                    </ui-select>
                  </template>
                </ui-table-column>
                <ui-table-column label="提醒时机">
                  <template slot-scope="scope">
                    <ui-checkbox-group 
                      @change="onChangeLinks"
                      v-model="tableForm.checkedLink">
                      <ui-checkbox v-for="item in links" :label="item.id" :key="item.id">{{item.type}}</ui-checkbox>
                    </ui-checkbox-group>
                  </template>
                </ui-table-column>
                <ui-table-column
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <ui-link type="danger" @click="onDelete(scope.row)">删除</ui-link>
                  </template>
                </ui-table-column>
              </ui-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vxTable from '@/components/vx-table'
export default {
  name:'taskCreation',
  components:{
    vxTable
  },
  data() {
    return {
      startTime: '',
      endTime: '',
      taskDeac: '',
      ruleForm: {},
      currentType:'1',
      tableForm:{
        checkedLink:[]
      },
      otherInfoForm:{
        checkedLink:[]
      },
      links:[//触达方式
        {type:'短信',id:'1'},
        {type:'企微',id:'2'},
        {type:'电话',id:'3'},
        {type:'线下',id:'4'},
      ],
      customerForm: {
        type:'1'
      },
      tableData:[
        {
          id:'1',
          groupName:'1',
          groupNum:'1',
          groupinstitute:'1',
          groupCreator:'1',
          groupCreateTime:'1'
        },
        {
          id:'2',
          groupName:'12',
          groupNum:'12',
          groupinstitute:'12',
          groupCreator:'12',
          groupCreateTime:'12'
        }
      ],
      columns:[
        {prop:'groupName',label:'群组名称'},
        {prop:'groupNum',label:'群组人数'},
        {prop:'groupinstitute',label:'归属机构'},
        {prop:'groupCreator',label:'创建人'},
        {prop:'groupCreateTime',label:'创建时间'},
      ]
    };
  },
  methods:{
    getSelectData(index){
      console.log(index);
    },
    //选择客户范围
    onSelectCustomer(val){
      this.currentType=val
      switch(val){
        case '1':this.columns=[
        {prop:'groupName',label:'群组名称'},
        {prop:'groupNum',label:'群组人数'},
        {prop:'groupinstitute',label:'归属机构'},
        {prop:'groupCreator',label:'创建人'},
        {prop:'groupCreateTime',label:'创建时间'}]; 
        break;
        case '2': this.columns=[
        {prop:'groupName',label:'白名单名称'},
        {prop:'groupNum',label:'人数'},
        {prop:'groupinstitute',label:'归属机构'},
        {prop:'groupCreator',label:'创建人'},
        {prop:'groupCreateTime',label:'创建时间'}];
        break;
        case '3'||'4':this.columns=[
        {prop:'groupName',label:'客户号'},
        {prop:'groupNum',label:'客户名称'},
        {prop:'groupinstitute',label:'归属机构'}]; 
        break;
       
      }
    },
    // 客户列表，白名单列表操作
    onOperation(val){
      console.log(val,'val');
    },
    // 触达方式变化
    onChangeLinks(val){
      console.log(val,'change');
    },
    // 删除
    onDelete(val){
      console.log(val,'val');
    }
  }
};
</script>

<style lang="scss" scoped>
.task-creation {
  box-sizing: border-box;
  width: 100%;
  .task-search {
    border: 1px solid #ccc;
    .search-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      padding: 20px;
      border-bottom: 1px solid #ccc;
    }
    .basic-info-container,
    .customer-scope-container,.other-info-container {
      padding: 40px;
      .info-title,
      .customer-title,.other-info-title {
        padding-bottom: 28px;
        font-size: 20px;
        font-weight: 600;
        color: #333;
      }
      .info-list {
        span {
          font-size: 16px;
        }
      }
      .other-info-list{
        margin-left: 180px;
        .other-info-table{
          .other-info-table-header{
            display: flex;
            align-items: center;
            span{
              margin-right: 20px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
::v-deep .ui-date-editor--date .ui-input__prefix {
  top: 0;
  left: 0;
}
::v-deep .ui-date-editor--date .ui-input__inner {
  padding-left: 27px;
}
::v-deep .ui-select,
.ui-date-editor.ui-input {
  width: 100%;
}
</style>
